<template>
    <div>
        <!-- 背景图 -->
        <div :style="'background-image:url(' + bjt + ')'" class="kj">

            <!-- 返回图标 -->
            <div @click="fh" style="width: 50px">
                <!-- <router-link to="/home/danciben"> </router-link> -->
                <van-icon name="share" class="fhtb" />
                <br />
                <span class="fanhui">返回</span>
            </div>

            <!-- 用户头像 -->
            <van-image width="6rem" height="6rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" class="jvz" />
            <!-- 单词本名 -->
            <h1 class="username">{{ $route.query.name }}</h1>
        </div>
        <div class="yiy">
            <van-row type="flex" justify="space-around">
                <van-col span="6" class="bk ysyw">
                    <p class="shuli">{{ dcgs.data2.yzw }}</p>

                    <p class="ys">已掌握</p>
                </van-col>
                <van-col span="6" class="bk ysyw2">
                    <p class="shuli">{{ dcgs.data2.yx }}</p>
                    <p class="ys">已学</p>
                </van-col>
                <van-col span="6" class="bk ysyw3">
                    <p class="shuli">{{ dcgs.data2.wx }}</p>
                    <p class="ys">未学</p>
                </van-col>
            </van-row>
        </div>
        <!-- 单词部分 -->
        <div style="margin-bottom: 100px">
            <div v-for="(item, value) in dcgs3.data" :key="value">
                <Dc @dc="hqhy" :xr2="item" :guanbi="true"></Dc>
            </div>
        </div>

        <!-- 添加单词 -->
        <div class="tinajia">
            <van-empty description="添加单词">
                <van-button round type="primary" class="bottom-button" @click="tinajiadcb">添加</van-button>
            </van-empty>
        </div>
        <!-- 添加单词弹出层 -->
        <van-dialog :beforeClose="tainjia" v-model="show" title="添加单词" show-cancel-button>
            <van-field v-model="danchiben.mz" name="单词名字" label="单词名字" placeholder="请输入单词名字" />
            <van-field v-model="danchiben.sy" name="单词释义" label="单词释义" placeholder="请输入单词释义" />
            <van-field name="radio" label="收藏单词">
                <template #input>
                    <van-radio-group v-model="danchiben.radio" direction="horizontal">
                        <van-radio name="false" checked>不收藏</van-radio>
                        <van-radio name="true">收藏</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field v-model="danchiben.message" rows="2" label="详细释义" type="textarea" placeholder="请输入单词详细释义" />
        </van-dialog>
        <div>
            <!-- 我要学习按钮 -->
            <van-button style="background-color: #39a9ed" size="large" class="xxys">我要学习</van-button>
            <!-- 收藏按钮 -->
            <van-button :icon="dcgs3.dcbshouchang?'star':'star-o'" type="primary" class="xxys2" @click="shoucahng" />

        </div>
        <!-- 音频，接口采用有道词典 http://dict.youdao.com/dictvoice?audio=   -->
        <div>
            <audio controls="controls" hidden="true" preload ref="audio">
                <!-- src动态绑定 -->
                <source :src="'http://dict.youdao.com/dictvoice?audio=' + dc" type="audio/mp3" />
                <source src="song.ogg" type="audio/ogg" />
            </audio>
        </div>
    </div>
</template>

<script>
// 注意:这里练习了vuex
import { mapMutations, mapState } from "vuex";
// 导入单词的单元格组件

import Dc from "../../components/dc.vue";
export default {
    // 服务器要获取的数据
    /* dcgs: {
         data1: {
           xr1: {
             id: 1,
             dc: 'abcdsadsadasdsad',
             label: '1侦听2器2'
           },
           xr2: {
             id: 2,
             dc: 'okokok',
             label: '2侦听2器2'
           },
           xr3: {
             id: 3,
             dc: 'abcdsadsadasdsad',
             label: '3侦听2器2'
           },
           xr4: {
             id: 4,
             dc: 'abcdsadsadasdsad',
             label: '4侦听2器2'
           },
           xr5: {
             id: 5,
             dc: 'abcdsadsadasdsad',
             label: '5侦听2器2'
           },
           xr6: {
             id: 6,
             dc: 'abcdsadsadasdsad',
             label: '6侦听2器2'
           },
           xr7: {
             id: 7,
             dc: 'abcdsadsadasdsad',
             label: '7侦听2器2'
           },
           xr8: {
             id: 8,
             dc: 'abcdsadsadasdsad',
             label: '8侦听2器2'
           },
           xr9: {
             id: 9,
             dc: 'abcdsadsadasdsad',
             label: '9侦听2器2'
           },
         },
         data2: {
           yzw: 23,//已掌握
           yx: 23,//已学
           wx: 29//未学
         }
       } */
    data() {
        return {
            // 动态绑定收藏图标
            tubiao: 'star-o',
            // 动态绑定背景图
            bjt: "https://wallpaperm.cmcm.com/8a114ce441360e3595a7f657f91a143d.jpg",
            dc: "a",
            // 学习单词个数（该属性为服务器属性，里面的data1暂时弃用，data2正在使用）
            dcgs: {
                data1: {
                    xr1: {
                        id: 1,
                        dc: "a",
                        label: "1侦听2器2",
                    },
                    xr2: {
                        id: 2,
                        dc: "b",
                        label: "2侦听2器2",
                    },
                    xr3: {
                        id: 3,
                        dc: "c",
                        label: "3侦听2器2",
                    },
                    xr4: {
                        id: 4,
                        dc: "d",
                        label: "4侦听2器2",
                    },
                    xr5: {
                        id: 5,
                        dc: "e",
                        label: "5侦听2器2",
                    },
                    xr6: {
                        id: 6,
                        dc: "abcdsadsadasdsad",
                        label: "6侦听2器2",
                    },
                    xr7: {
                        id: 7,
                        dc: "abcdsadsadasdsad",
                        label: "7侦听2器2",
                    },
                    xr8: {
                        id: 8,
                        dc: "abcdsadsadasdsad",
                        label: "8侦听2器2",
                    },
                    xr9: {
                        id: 9,
                        dc: "abcdsadsadasdsad",
                        label: "9侦听2器2",
                    },
                },
                data2: {
                    yzw: 23, //已掌握
                    yx: 23, //已学
                    wx: 29, //未学
                },
            },
            // 离线学习单词
            dcgs3: [],
            // 控制添加单词的弹窗
            show: false,
            // 创建单词数据
            danchiben: {
                // 单词名字
                mz: null,
                // 单词释义
                sy: null,
                // 单词是否收藏
                radio: null,
                // 详细释义
                message: null,
            },
        };
    },
    computed: {
        // dcbsj为vuex储存的单词表数据，被直接渲染在html中，编写离线版时要注意
        ...mapState(["dcbsj"]),
    },
    components: {
        Dc,
    },
    methods: {
        ...mapMutations(['dancibensc', 'tianjiadc']),
        // 点击收藏按钮，更新收藏状态
        shoucahng() {
            this.dancibensc(this.dcgs3.id)
            //    根据收藏状态弹出提示框
            if (this.dcgs3.dcbshouchang) {
                Notify({ type: 'success', message: '单词本收藏成功' })
            } else {
                Notify({ type: 'warning', message: '单词本已取消收藏' })
            }


            // 更新收藏状态后，重新获取单词本数据
            this.wc()

        },
        // 把子组件的单词赋值给data里的dc
        hqhy(val) {
            this.dc = val;
            let url = "http://dict.youdao.com/dictvoice?audio=" + this.dc;
            this.$refs.audio.src = url;

            this.$refs.audio.play();
        },

        wc() {
            console.log(this.dcgs, "this.dcgs");
            // 对Vuex获取的单词本数据进行处理,注意此时刷新页面会弹出报错,
            // 需要用判断this.dcbsj是否存在数据，如果不存在，把会话储存的数据取出使用
            if (this.dcbsj.length === 0) {
                this.dcgs3 = JSON.parse(sessionStorage.getItem("dcbsj"));
                console.log("dcbsj不存在");
            } else {
                this.dcgs3 = this.dcbsj;
                console.log("dcbsj存在");
            }
            console.log("666");
            console.log(this.dcbsj, "this.dcbsj");
            console.log(this.dcgs3, "this.dcgs3", "核心");
        },
        fh() {
            this.$router.back();
        },
        // 单词弹窗层事件
        tinajiadcb() {
            this.show = !this.show
        },
        // 添加单词事件
        tainjia(action, dome) {
            if (action === "confirm") { // 点击确定走这里
                // 如果填写了就放行(这里需要优化)（this.danchiben.radio的值为字符串）
                if (this.danchiben.mz && this.danchiben.sy && this.danchiben.radio && this.danchiben.message) {
                    //  判断单词是否重复
                    if (this.dcgs3.data.some(item => item.danci == this.danchiben.mz)) {
                        Notify({ type: 'danger', message: '该单词已存在' })

                        dome(false)
                    } else {
                        // 把单词本id和添加单词数据传入Vuex中
                        this.tianjiadc([this.dcgs3.id, this.danchiben])
                        Notify({ type: 'success', message: '单词添加成功' })
                        console.log('放行')
                        // 清空输入框
                        this.danchiben = {
                            // 单词名字
                            mz: null,
                            // 单词释义
                            sy: null,
                            // 单词是否收藏（赋值为字符串，不是布尔值）
                            radio: null,
                            // 详细释义
                            message: null,
                        },
                            dome()
                    }

                } else {
                    console.log('不放行')
                    dome(false)
                }
                console.log(this.danchiben, '添加单词')
                // done()里可以放true和false来控制
            }
            else {// 点击取消走这里
                this.danchiben = {
                    // 单词名字
                    mz: null,
                    // 单词释义
                    sy: null,
                    // 单词是否收藏（赋值为字符串，不是布尔值）
                    radio: null,
                    // 详细释义
                    message: null,
                },
                    dome()
            }


        }
    },
    mounted() {
        this.wc()
    }
};

import { Notify } from 'vant';

</script>

<style lang="less" scoped>
html,
body {
    width: 100%;
    height: 100%;
    overflow: scroll;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}
body {
    margin: 0;
}
/* 上面的是隐藏侧边滚动条 */
.kj {
    width: 100%;
    height: 195px;
    display: block;
    position: relative;
}
.fhtb {
    margin-left: 8px;
    margin-top: 8px;
    color: rgb(16, 168, 238);
    font-size: 38px;
    transform: rotateY(180deg);
}
.fanhui {
    color: rgb(255, 255, 255);
    font-weight: 700;
    margin-left: 10px;
}
.jvz {
    display: block;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -48px;
    margin-left: -48px;
}
.username {
    text-align: center;
    color: white;
    position: relative;
    top: 72px;
    font-size: 24px;
}
.yiy {
    box-shadow: 0px 0.3px 13px 0.3px rgb(226, 225, 225);
    margin-bottom: 3px;
}
.bk {
    height: 60px;
    text-align: center;
    line-height: 2px;
}
.shuli {
    font-weight: 700;
    font-size: 22px;
}
.ys {
    font-size: 17px;
    font-weight: 700;
}
.ysyw {
    color: green;
}
.ysyw2 {
    color: rgb(39, 197, 245);
}
.ysyw3 {
    color: rgb(161, 1, 1);
}
.xxys {
    width: 85%;
    margin-top: 120px;
    color: white;
    font-size: 20px;
    position: fixed;
    bottom: 50px;
    border: 0px;
    border-radius: 4px 0px 0px 4px;
}
.xxys2 {
    width: 15%;
    height: 50px;
    right: 0;
    margin-top: 120px;
    color: white;
    font-size: 20px;
    position: fixed;
    border: 0px;
    border-radius: 0px 4px 4px 0px;
    bottom: 50px;
}
.tinajia {
    margin-top: 40px;
    margin-bottom: 90px;
}
.bottom-button {
    width: 160px;
    height: 40px;
}
.van-field__control {
    min-height: 100px;
}
.van-notify {
    line-height: 500px !important;
}
.van-dialog{
    width: 90%;
}
/deep/.van-field--min-height .van-field__control{
    min-height: 160px;
}
</style>
